<template>
    <div class="lay-page-pd lay-flex-column">
        <!-- search -->
        <SearchWrap>
            <el-form :model="searchValue" label-width="auto" inline class="lay-form">
                <el-form-item label="入店时间:" prop="dateTimeRange" key="dateTimeRange">
                    <el-date-picker
                        v-model="searchValue.dateTimeRange"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="起始时间"
                        range-separator="至"
                        end-placeholder="截止时间"
                        :default-time="['00:00:00', '23:59:59']"
                        clearable
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="省办" prop="provinceId" key="provinceId">
                    <SelectGoodsCover v-model="searchValue.provinceId" :options="brandsOptions" />
                </el-form-item>
                <el-form-item label="赠品品牌:" prop="sortId" key="sortId">
                    <SelectGiftSort v-model="searchValue.sortId" />
                </el-form-item>
                <el-form-item label="赠品名称:" prop="giftName" key="giftName">
                    <el-input v-model="searchValue.giftName" placeholder="输入赠品名称" clearable prefix-icon="el-icon-edit"> </el-input>
                </el-form-item>
            </el-form>
            <template v-slot:btn>
                <el-button :loading="isLoadingTableData" type="primary" icon="el-icon-search" @click="handleSearch">筛选 </el-button>
                <!-- <el-button :loading="isLoadingExport" type="primary" class="lay-ctrl-btn" @click="handleExportExcel">导出</el-button> -->
                <el-button type="text" @click="handleResetSearch">重置筛选条件</el-button>
            </template>
        </SearchWrap>
        <!-- add -->

        <!-- table -->
        <TableWrap :data="tableData" v-loading="isLoadingTableData">
            <el-table-column prop="provinceName" label="省办" align="center"></el-table-column>
            <el-table-column prop="sortName" label="赠品品牌" align="center"></el-table-column>
            <el-table-column prop="giftImage" label="封面图" align="center" width="130">
                <template v-slot="scope">
                    <el-image fit="cover" :src="scope.row.giftImage" :preview-src-list="previewImgs" class="lay-table_img"> </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="giftName" label="名称" align="center"></el-table-column>

            <el-table-column prop="distributionNum" label="总赠品数量" align="center" width="100px">
                <template v-slot:header="scope">
                    <div>
                        总赠品数量
                        <el-tooltip :aa="scope" class="item" effect="dark" placement="top-start">
                            <i class="el-icon-question"> </i>
                            <div style="width: 110px " class="div" slot="content">
                                总部分配省办的数量
                            </div>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="examinePassNum" label="已申领数量" align="center" width="100px">
                <template v-slot="scope">
                    <p>{{ parseInt(scope.row.applyNum) + parseInt(scope.row.examinePassNum) }}</p>
                </template>
                <template v-slot:header="scope">
                    <div>
                        已申领数量
                        <el-tooltip :aa="scope" class="item" effect="dark" placement="top-start">
                            <i class="el-icon-question"> </i>
                            <div style="width: 110px " class="div" slot="content">
                                省办推广向总部大区已申领数量
                            </div>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="stayDistributionNum" label="待申领数量" align="center" width="100px">
                <template v-slot:header="scope">
                    <div>
                        待申领数量
                        <el-tooltip :aa="scope" class="item" effect="dark" placement="top-start">
                            <i class="el-icon-question"> </i>
                            <div style="width: 110px " class="div" slot="content">
                                省办推广剩余可申领数量
                            </div>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="enterShopNum" label="已入店数量" align="center" width="100px">
                <template v-slot:header="scope">
                    <div>
                        已入店数量
                        <el-tooltip :aa="scope" class="item" effect="dark" placement="top-start">
                            <i class="el-icon-question"> </i>
                            <div style="width: 110px " class="div" slot="content">
                                业务/导购确认收货的数量
                            </div>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="surplusNum" label="待入店数量" align="center" width="100px">
                <template v-slot:header="scope">
                    <div>
                        待入店数量
                        <el-tooltip :aa="scope" class="item" effect="dark" placement="top-start">
                            <i class="el-icon-question"> </i>
                            <div style="width: 110px " class="div" slot="content">
                                业务/导购未收货的数量
                            </div>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" align="center" width="">
                <template v-slot="scope">
                    <el-button type="text" class="lay-table_btn" @click="handleEdit(scope.row)">申领</el-button>
                </template>
            </el-table-column>
        </TableWrap>
        <!-- pagination -->
        <el-pagination
            :disabled="isLoadingTableData"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="page"
            @current-change="handlePageChange"
            :page-size="pageSize"
            :page-sizes="[5, 10, 20, 50, 100]"
            @size-change="handlePageSizeChange"
            :total="total"
            background
        >
        </el-pagination>
        <!-- components -->
        <Edit :show.sync="isShowEdit" :edit-type="editType" :item-data="itemData" @confirm="handleEditConfirm" />
    </div>
</template>

<script>
import { getGiftDistributionList } from "@/api";
import SelectGoodsCover from "@/components/element/select/OrgProvince";

import SelectGiftSort from "@/components/element/select/GiftSort";
import tableListMixin from "@/mixins/tableList.js";
import Edit from "./distribution/Edit";

const searchValue = {
    dateTimeRange: null,
    provinceId: "",
    sortId: "",
    giftName: "",
};

export default {
    name: "GiftDistribution",
    mixins: [tableListMixin],
    components: {
        SelectGiftSort,
        SelectGoodsCover,
        Edit,
    },
    data() {
        return {
            // search
            searchValue: {
                ...searchValue,
            },
            brandsOptions: [],
            search: {
                provinceId: "",
                sortId: "",
                giftName: "",
            },
        };
    },
    computed: {
        // preview image
        previewImgs() {
            let arr = [];
            for (let item of this.tableData) {
                arr.push(item.giftImage);
            }
            return arr;
        },
    },
    methods: {
        // reset search
        handleResetSearch() {
            this.searchValue = { ...searchValue };

            this.handleSearch();
        },
        // get data
        async handleGetData() {
            this.isLoadingTableData = true;
            const res = await getGiftDistributionList({
                startTime: this.searchValue.dateTimeRange ? this.searchValue.dateTimeRange[0] : "",
                endTime: this.searchValue.dateTimeRange ? this.searchValue.dateTimeRange[1] : "",
                page: this.page,
                pageSize: this.pageSize,
                ...this.searchValue,
                dateTimeRange: undefined,
            });
            this.isLoadingTableData = false;
            if (res.code === "1") {
                this.total = res.data.total;
                this.tableData = Object.freeze(res.data.list);
            } else {
                this.$message.error(res.msg);
            }
        },
    },
};
</script>
<style>
.el-tooltip__popper {
    background: white !important;
}
.div {
    color: black;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
    border-top-color: red !important;
}
</style>
